<template>
  <div style="display: block">
    <div style="display: flex;margin-top: 50px">
      <div v-if="mode==='1'" style="align-self: start;width: 700px;font-size: 30px">搜索到的仓库</div>
      <div v-if="mode==='2'" style="align-self: start;width: 700px;font-size: 30px">搜索到的用户</div>
    </div>
    <div v-if="total>0"  style="display: block; height: 450px;padding: 30px">
      <div  v-if="mode==='1'"   v-for="item in TableData" class="pull-menu-view-item" style="display: block">
        <div style=" display: flex;justify-content: center;">
          <div style="display: block;padding: 20px;border-bottom: 2px solid #e2e9ee;width:700px ">
            <div style="display: flex;justify-content: start;width: 800px">
              <el-icon><MessageBox /></el-icon>
              <div style="font-size: 30px;padding-right: 5px;color: #348cd6">
                {{ item.ownerName }}
              </div>
              <div style="font-size: 35px;padding-right: 5px;color: #348cd6">
                /
              </div>
              <div style="align-self: center;display: flex" >
                <el-button  link type="primary" @click="linkRepo(item.ownerName,item.repoName)">
                  <div style="font-size: 30px">
                    {{ item.repoName }}
                  </div>
                </el-button>
<!--                <el-button v-if="mode==='2'" link type="primary" @click="linkUser(item.userName)">
                  <div style="font-size: 30px">
                    {{ item.userName }}
                  </div>
                </el-button>-->
              </div>
            </div>
            <div style="display: flex;justify-content: start;width: 800px">
              <div  style="margin-top: 10px;align-self: center;font-size: 20px;color: grey">
                {{ item.description }}
              </div>
<!--              <div v-if="mode==='2'" style="margin-top: 10px;align-self: center;font-size: 20px;color: grey">-->
              </div>
            </div>
          </div>
        </div>
      <div  v-if="mode==='2'"   v-for="item in TableData" class="pull-menu-view-item" style="display: block">
        <div style=" display: flex;justify-content: center;">
          <div style="display: block;padding: 10px;border-bottom: 2px solid #e2e9ee;width:700px ">
            <div style="display: flex;justify-content: start;width: 800px">
              <div style="align-self: center; display: flex" >
                <el-icon><User /></el-icon>
                <el-button  link type="primary" @click="linkUser(item.userName)">
                  <div style="font-size: 30px">
                    {{ item.userName }}
                  </div>
                </el-button>
              </div>
            </div>
            <div style="display: flex;justify-content: start;width: 800px">
              <div  style="margin-top: 10px;align-self: center;font-size: 20px;color: grey">
                {{item.description }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="total===0" style="display: block; height: 450px;padding: 30px">
        <div v-if="total===0" style="align-self: center;margin-top: 100px; font-size: 50px">
          尚未找到任何内容，您可以更换关键字组合重试
        </div>
      </div>
  </div>
  <div style="padding-top:5px ;margin: 10px 0;display: flex;justify-content: center; ">
      <div style="width: 800px;border-top: 2px solid grey">
        <el-pagination
            v-model:currentPage="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
<!--  <el-table :data="TableData" border stripe style="width: 100%">
    <el-table-column prop="id" label="id" sortable/>
    <el-table-column prop="type" label="品种" sortable/>
    <el-table-column prop="time" label="时间" />
    <el-table-column prop="address" label="地点" />
    <el-table-column prop="currentp" label="当前人数" />
    <el-table-column prop="totalp" label="可选人数" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button type="text"  @click="handleEdit(scope.row)">编辑</el-button>
        <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
          <template #reference>
            <el-button type="danger" style="margin-left: 5px">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>-->

</template>

<script>
import request from "@/utils/request";
import {User,MessageBox} from '@element-plus/icons-vue';
export default {
  data(){
    return{
      total:'',
      searchContent:'',
      userName:'',
      mode:'',
      TableData:[]
    }
  },
  components:{
    User,
    MessageBox
  },
  created(){
    console.log("Creating")
    this.userName=sessionStorage.getItem("userName")
    this.searchContent=this.$route.query.content
    this.mode=this.$route.query.mode
    console.log(this.searchContent)
    this.load()
  },
  updated(){
    this.searchContent=this.$route.query.content
    this.mode=this.$route.query.mode
    console.log("content changed")
    this.load()
  },
  methods:{
    load(){
      console.log("Searching")
      console.log(this.searchContent)
      if(this.mode=='1'){
        request.get("/repo/search",{
          params:{
            currentPage: 1,
            pageSize: 10,
            search:this.searchContent
          }
        }).then(res => {
          this.TableData=res.data.records
          this.total=res.data.total
        })
      }
      else {
        request.get("/user/search", {
          params:{
            currentPage: 1,
            pageSize: 10,
            search:this.searchContent
          }
        }).then(res => {
          console.log(res)
          this.TableData=res.data.records
          this.total=res.data.total
        })
      }
    },
    handleSizeChange(pageSize){
      this.pageSize= pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.currentPage= pageNum
      this.load()
    },
    linkRepo(userName,repoName){
      console.log(repoName)
      console.log(userName)
      this.$router.push("/"+userName+"/"+repoName+"/tree/master")
    },
    linkUser(userName){
      console.log(userName)
      this.$router.push("/"+userName+"/")
    },
  },
  name: "searchView"
}
</script>

<style scoped>

</style>
